import 'package:ati_package/core/extension/ati_widgets_extension.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/route_manager.dart';

import '../../../../core/utils/ati_assets.dart';
import '../../../../core/utils/ati_color.dart';
import 'sign_success_dialog.dart';

class SignListWidget extends StatefulWidget {
  const SignListWidget({super.key});

  @override
  State<SignListWidget> createState() => _SignListWidgetState();
}

class _SignListWidgetState extends State<SignListWidget> {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.symmetric(horizontal: 16.r),
      padding: EdgeInsets.symmetric(vertical: 15.r, horizontal: 10.r),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10.r),
        gradient: LinearGradient(
          colors: [Color(0xFFE0FFF7), Color(0xFFF9FFFF)],
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
        ),
      ),
      child: Column(
        children: [
          _buildHeaderTitle(),
          _buildContentListWidget(),
          _buildFootWidget(),
        ],
      ),
    );
  }

  _buildHeaderTitle() {
    return Text.rich(
      TextSpan(
        text: '已连续签到',
        style: TextStyle(fontSize: 14.sp, color: AtiColor.textColor1),
        children: [
          TextSpan(
            text: '9',
            style: TextStyle(
              color: AtiColor.primary,
              fontWeight: FontWeight.bold,
            ),
          ),
          TextSpan(
            text: '天',
            style: TextStyle(
              color: AtiColor.textColor1,
              fontWeight: FontWeight.w500,
            ),
          ),
        ],
      ),
    );
  }

  _buildContentListWidget() {
    return Container(
      margin: EdgeInsets.only(top: 34.r),
      height: 120.r,
      child: ListView.builder(
        scrollDirection: Axis.horizontal,
        itemCount: 30,
        itemBuilder: (context, index) {
          final day = index + 1;
          final currentDay = 5; // 当前签到到第5天
          final isToday = day == currentDay;
          final isSigned = day <= currentDay;

          return Container(
            width: 80, // ✅ 固定宽度
            margin: const EdgeInsets.symmetric(horizontal: 0),
            child: Column(
              children: [
                /// --- 进度条部分 ---
                Container(
                  height: 16.r,
                  width: double.infinity, // ✅ 现在父容器有宽度约束，可以使用
                  margin: const EdgeInsets.only(bottom: 8),
                  child: Stack(
                    alignment: AlignmentGeometry.center,
                    clipBehavior: Clip.none,
                    children: [
                      // 背景线
                      Container(
                        height: 6.r,
                        decoration: BoxDecoration(
                          color: Colors.grey.shade300,
                          // borderRadius: BorderRadius.circular(4),
                        ),
                      ),

                      Positioned(
                        child: Container(
                          width: 16.r,
                          height: 16.r,
                          decoration: BoxDecoration(
                            color: isSigned
                                ? Color(0xFF077547)
                                : Color(0xFFC9C9CC),
                            shape: BoxShape.circle,
                            // border: isToday
                            //     ? Border.all(
                            //         color: Color(0xFF077547),
                            //         width: 2,
                            //       )
                            //     : Border.all(
                            //         color: Colors.white,
                            //         width: 2,
                            //       ),
                          ),
                        ),
                      ),
                      // 绿色进度线（根据签到天数调整）
                      // FractionallySizedBox(
                      //   alignment: Alignment.centerLeft,
                      //   widthFactor: isSigned
                      //       ? 1.0
                      //       : 0.0, // ✅ 已签到的显示满格
                      //   child: Container(
                      //     decoration: BoxDecoration(
                      //       color: Colors.green.shade400,
                      //       // borderRadius: BorderRadius.circular(
                      //       //   4,
                      //       // ),
                      //     ),
                      //   ),
                      // ),
                    ],
                  ),
                ),
                SizedBox(height: 2.5.r),
                Container(
                  width: double.infinity,
                  margin: EdgeInsets.symmetric(horizontal: 5.r),
                  padding: EdgeInsets.symmetric(vertical: 12.5),
                  decoration: BoxDecoration(
                    color: isToday
                        ? Color(0xFFD1FFF5)
                        : isSigned
                        ? Color(0xFFD1FFF5)
                        : Colors.white,
                    borderRadius: BorderRadius.circular(10.r),
                  ),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text(
                        isToday ? '今日' : '第$day天',
                        style: TextStyle(
                          fontSize: 12.sp,
                          color: isToday
                              ? Colors.green.shade700
                              : Colors.black87,
                          fontWeight: isToday
                              ? FontWeight.w600
                              : FontWeight.w500,
                        ),
                      ),
                      SizedBox(height: 2.5.r),
                      Image.asset(
                        width: 28.r,
                        height: 28.r,
                        AtiAssets.signListIcon,
                        package: 'ati_package',
                      ),
                      SizedBox(height: 5.r),
                      Text(
                        '+10积分',
                        style: TextStyle(
                          fontSize: 12,
                          color: isSigned ? Colors.green : Colors.grey.shade500,
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          );
        },
      ),
    );
  }

  _buildFootWidget() {
    return Container(
      margin: EdgeInsets.only(top: 12.r),
      child: Column(
        children: [
          /// 提示文字
          Text(
            '温馨提示：断签后，连续签到天数将重新开始计算',
            style: TextStyle(fontSize: 12.sp, color: Color(0xFF666666)),
          ),
          SizedBox(height: 16.h),

          /// 签到按钮
          GestureDetector(
            onTap: () {
              // TODO: 触发签到逻辑
            },
            child:
                Container(
                  width: double.infinity,
                  margin: EdgeInsets.symmetric(horizontal: 20.r),
                  padding: EdgeInsets.symmetric(vertical: 14.h),
                  decoration: BoxDecoration(
                    color: Color(0xFFBDBFC6),
                    borderRadius: BorderRadius.circular(30.r),
                  ),
                  child: Center(
                    child: Text(
                      '今日签到',
                      style: TextStyle(
                        fontSize: 16.sp,
                        color: Colors.white,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                ).addTapGesture(
                  onTap: () {
                    Get.dialog(SignSuccessDialog(), barrierDismissible: false);
                  },
                ),
          ),
        ],
      ),
    );
  }
}
